<template>
  <div>
    {{ userName }}
    <ul>
      <li v-for="item in state" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
// 从 vue 中导出 defineComponent
import { defineComponent, ref } from "vue";

// 添加数组类型约束
interface Course {
  id: number;
  name: string;
}

export default defineComponent({
  setup() {
    // 限制对象类型
    const state = ref<Course[]>([]);
    // 限制单个值的数据类型
    const userName = ref<string>("");
    setTimeout(() => {
      // userName.value = 5;  赋值类型和约定的类型不符时报错
      userName.value = "李四";
      state.value.push({
        id: 1,
        name: "李四",
      });
    }, 1000);
    return {
      state,
      userName,
    };
  },
});
</script>

